<template>
  <div>
    <el-row>
      <!-- 第一列图表展示 -->
      <el-col :span="12" class="charts-box">
        <!-- 折线图 -->
        <ve-line :data="chartData" height="400px" class="charts-border" />
        <!-- 直方图 -->
        <ve-histogram :data="chartData" height="400px" />
      </el-col>
      <!-- 第二列图表展示 -->
      <el-col :span="12" class="charts-box">
        <!-- 饼图 -->
        <ve-pie :data="chartData" height="400px" class="charts-border" />
        <!-- 雷达图 -->
        <ve-radar :data="chartData_1" height="400px" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { chartData } from '@/api/search'
export default {
  name: 'HistoGram',
  data: function() {
    // 初始化数据
    return {
      // 图表筛选条件
      filterData: {
        date: '时间',
        count: '新闻数'
      },
      // 图表数据格式
      chartData: {
        columns: ['日期', '新闻数', '轮播图数'],
        rows: []
      },
      // 第二个图表的数据格式
      chartData_1: {
        columns: ['日期', '新闻数', '轮播图数', '下单率'],
        rows: [
          // 示例数据
          {
            日期: '2023-03-04',
            新闻数: 133,
            轮播图数: 109,
            下单率: 0.32
          },
          {
            日期: '2023-03-05',
            新闻数: 123,
            轮播图数: 99,
            下单率: 0.28
          },
          {
            日期: '2023-03-06',
            新闻数: 113,
            轮播图数: 89,
            下单率: 0.26
          }

          // 更多数据...
        ]
      }
    }
  },
  // 页面加载时获取综合数据
  mounted() {
    this.getComprehensive()
  },
  methods: {
    // 获取综合数据的方法
    async getComprehensive() {
      try {
        // 从API获取图表数据
        const response = await chartData()
        console.log('response: ', response)
        // 将获取的数据格式化并填充到chartData.rows中
        this.chartData.rows = response.data.map((item) => {
          return {
            日期: item.date,
            新闻数: item.newsCount,
            轮播图数: item.bannerCount
          }
        })
        // this.chartData_1.rows = response.data.map((item) => {
        //   return {
        //     日期: item.date,
        //     新闻数: item.newsCount,
        //     轮播图数: item.bannerCount,
        //     // 下单率随机生成
        //     下单率: 0.33
        //   }
        // })
      } catch (error) {
        console.log('error: ', error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// 定义图表容器的样式
.charts-box {
  border: 1px solid #666;
  padding: 20px;
  box-sizing: border-box;
}
// 移除第一个图表容器的右侧边框
.charts-box:nth-child(1) {
  border-right: 0;
}
// 定义图表边框的样式
.charts-border {
  border-bottom: 1px dotted #666;
  margin-bottom: 30px;
}
</style>
